<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">PDF表单生成器</h1>

    <!-- 步骤指示器 -->
    <div class="flex items-center justify-between mb-8">
      <div class="flex flex-col items-center">
        <div
          class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center"
        >
          1
        </div>
        <span class="mt-2 text-sm">上传PDF</span>
      </div>
      <div class="w-1/4 h-1 bg-gray-200"></div>
      <div class="flex flex-col items-center">
        <div
          class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center"
        >
          2
        </div>
        <span class="mt-2 text-sm">AI处理</span>
      </div>
      <div class="w-1/4 h-1 bg-gray-200"></div>
      <div class="flex flex-col items-center">
        <div
          class="w-10 h-10 rounded-full bg-gray-300 text-gray-600 flex items-center justify-center"
        >
          3
        </div>
        <span class="mt-2 text-sm">预览表单</span>
      </div>
    </div>

    <!-- 步骤内容 -->
    <div class="space-y-8">
      <!-- 步骤1：上传PDF -->
      <div v-if="currentStep === 1">
        <div
          class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center hover:bg-gray-50 transition-colors cursor-pointer"
          @click="handleFileUpload"
        >
          <div class="flex flex-col items-center justify-center">
            <i class="fa fa-cloud-upload text-5xl text-gray-400 mb-4"></i>
            <h3 class="text-lg font-medium text-gray-700 mb-2">
              拖放PDF文件到此处
            </h3>
            <p class="text-gray-500 mb-4">或点击选择文件</p>
            <input
              type="file"
              accept=".pdf"
              ref="fileInput"
              @change="handleFileChange"
              class="hidden"
            />
            <button
              class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors"
            >
              选择PDF文件
            </button>
          </div>
        </div>

        <!-- 已上传文件预览 -->
        <div v-if="uploadedFile" class="mt-4">
          <div
            class="flex items-center justify-between bg-gray-50 p-4 rounded-lg"
          >
            <div class="flex items-center">
              <i class="fa fa-file-pdf-o text-red-500 mr-3 text-xl"></i>
              <div>
                <p class="font-medium">{{ uploadedFile.name }}</p>
                <p class="text-sm text-gray-500">
                  {{ formatFileSize(uploadedFile.size) }}
                </p>
              </div>
            </div>
            <button
              @click="removeFile"
              class="text-gray-400 hover:text-red-500"
            >
              <i class="fa fa-times-circle"></i>
            </button>
          </div>
        </div>

        <div class="flex justify-end mt-8">
          <button
            @click="nextStep"
            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-md transition-colors"
            :disabled="!uploadedFile"
          >
            下一步
          </button>
        </div>
      </div>

      <!-- 步骤2：AI处理 -->
      <div v-if="currentStep === 2">
        <div class="bg-gray-50 rounded-lg p-8 text-center">
          <div class="flex flex-col items-center justify-center">
            <div
              class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mb-4"
            ></div>
            <h3 class="text-lg font-medium text-gray-700 mb-2">
              正在处理您的PDF文件...
            </h3>
            <p class="text-gray-500 mb-4">
              我们正在使用AI技术分析PDF内容并生成表单
            </p>

            <!-- 处理进度 -->
            <div class="w-full bg-gray-200 rounded-full h-2.5 mb-6">
              <div
                class="bg-blue-500 h-2.5 rounded-full"
                :style="{ width: `${progress}%` }"
              ></div>
            </div>

            <p class="text-sm text-gray-500">处理进度: {{ progress }}%</p>
          </div>
        </div>

        <!-- 表单模板选择 -->
        <div class="mt-8">
          <h3 class="text-lg font-medium mb-4">选择表单模板</h3>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div
              class="border rounded-lg p-4 cursor-pointer hover:border-blue-500 transition-colors"
              :class="{
                'border-blue-500 bg-blue-50': selectedTemplate === 'modern',
              }"
              @click="selectedTemplate = 'modern'"
            >
              <div class="h-32 bg-gray-100 rounded mb-2"></div>
              <h4 class="font-medium">现代风格</h4>
            </div>
            <div
              class="border rounded-lg p-4 cursor-pointer hover:border-blue-500 transition-colors"
              :class="{
                'border-blue-500 bg-blue-50': selectedTemplate === 'classic',
              }"
              @click="selectedTemplate = 'classic'"
            >
              <div class="h-32 bg-gray-100 rounded mb-2"></div>
              <h4 class="font-medium">经典风格</h4>
            </div>
            <div
              class="border rounded-lg p-4 cursor-pointer hover:border-blue-500 transition-colors"
              :class="{
                'border-blue-500 bg-blue-50': selectedTemplate === 'minimal',
              }"
              @click="selectedTemplate = 'minimal'"
            >
              <div class="h-32 bg-gray-100 rounded mb-2"></div>
              <h4 class="font-medium">简约风格</h4>
            </div>
          </div>
        </div>

        <div class="flex justify-between mt-8">
          <button
            @click="prevStep"
            class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-md transition-colors"
          >
            上一步
          </button>
          <button
            @click="processWithAI"
            class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-6 rounded-md transition-colors"
            :disabled="!selectedTemplate"
          >
            生成表单
          </button>
        </div>
      </div>

      <!-- 步骤3：预览表单 -->
      <div v-if="currentStep === 3">
        <div class="bg-gray-50 rounded-lg p-8 mb-8">
          <h3 class="text-lg font-medium mb-4">表单预览</h3>

          <!-- 这里会动态渲染生成的表单 -->
          <div v-if="generatedForm" class="space-y-4">
            <div v-html="generatedForm"></div>
          </div>

          <div v-else class="text-center py-12">
            <i class="fa fa-file-text-o text-5xl text-gray-300 mb-4"></i>
            <p class="text-gray-500">表单生成中...</p>
          </div>
        </div>

        <div class="flex justify-between mt-8">
          <button
            @click="prevStep"
            class="bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-2 px-6 rounded-md transition-colors"
          >
            上一步
          </button>
          <button
            @click="saveForm"
            class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-6 rounded-md transition-colors"
            :disabled="!generatedForm"
          >
            保存表单
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PdfFormGenerator',
  data() {
    return {
      currentStep: 1,
      fileInput: null,
      uploadedFile: null,
      fileContent: null,
      progress: 0,
      selectedTemplate: null,
      generatedForm: null,
      formStatus: null,
      formError: '',
    };
  },
  mounted() {
    this.fileInput = this.$refs.fileInput;
  },
  methods: {
    handleFileUpload() {
      this.fileInput.click();
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file && file.type === 'application/pdf') {
        this.uploadedFile = file;
        this.readPdfContent(file);
      } else {
        alert('请上传PDF文件');
        this.fileInput.value = '';
      }
    },
    removeFile() {
      this.uploadedFile = null;
      this.fileInput.value = '';
    },
    formatFileSize(bytes) {
      if (bytes < 1024) return bytes + ' B';
      else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
      else return (bytes / 1048576).toFixed(1) + ' MB';
    },
    nextStep() {
      this.currentStep++;
    },
    prevStep() {
      this.currentStep--;
    },
    readPdfContent(file) {
      // 这里可以使用PDF.js等库来解析PDF内容
      // 简化起见，我们只读取文件内容
      const reader = new FileReader();
      reader.onload = event => {
        this.fileContent = event.target.result;
      };
      reader.readAsArrayBuffer(file);
    },
    processWithAI() {
      // 模拟AI处理过程
      this.progress = 0;
      const interval = setInterval(() => {
        this.progress += 10;
        if (this.progress >= 100) {
          clearInterval(interval);
          // 模拟AI生成表单
          this.generateForm();
        }
      }, 300);
    },
    generateForm() {
      // 这里应该调用AI API来生成表单
      // 简化起见，我们根据选择的模板生成一个示例表单
      let formHtml = '';

      if (this.selectedTemplate === 'modern') {
        formHtml = `
          <div class="bg-white p-6 rounded-lg shadow-md">
            <h3 class="text-xl font-bold mb-4">员工信息表</h3>
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                <input type="text" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入姓名">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                <select class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                  <option value="">请选择部门</option>
                  <option value="hr">人力资源</option>
                  <option value="it">信息技术</option>
                  <option value="marketing">市场营销</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                <div class="flex space-x-4">
                  <label class="flex items-center">
                    <input type="radio" name="gender" value="male" class="mr-2"> 男
                  </label>
                  <label class="flex items-center">
                    <input type="radio" name="gender" value="female" class="mr-2"> 女
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">兴趣爱好</label>
                <div class="space-y-2">
                  <label class="flex items-center">
                    <input type="checkbox" value="reading" class="mr-2"> 阅读
                  </label>
                  <label class="flex items-center">
                    <input type="checkbox" value="sports" class="mr-2"> 运动
                  </label>
                  <label class="flex items-center">
                    <input type="checkbox" value="music" class="mr-2"> 音乐
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                <textarea rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="请输入备注信息"></textarea>
              </div>
              <div class="pt-2">
                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md transition-colors">
                  提交表单
                </button>
              </div>
            </div>
          </div>
        `;
      } else if (this.selectedTemplate === 'classic') {
        formHtml = `
          <div class="bg-white p-6 border border-gray-200 rounded-lg">
            <h3 class="text-xl font-bold mb-4 text-center">员工信息表</h3>
            <form class="space-y-4">
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">     
                <label class="text-right font-medium">姓名</label>
                <div class="md:col-span-2">
                  <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md">
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-right font-medium">部门</label>
                <div class="md:col-span-2">
                  <select class="w-full px-3 py-2 border border-gray-300 rounded-md">
                    <option value="">请选择部门</option>
                    <option value="hr">人力资源</option>
                    <option value="it">信息技术</option>
                    <option value="marketing">市场营销</option>
                  </select>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-center">
                <label class="text-right font-medium">性别</label>
                <div class="md:col-span-2 flex space-x-4">
                  <label class="flex items-center">
                    <input type="radio" name="gender" value="male" class="mr-2"> 男
                  </label>
                  <label class="flex items-center">
                    <input type="radio" name="gender" value="female" class="mr-2"> 女
                  </label>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
                <label class="text-right font-medium">兴趣爱好</label>
                <div class="md:col-span-2 space-y-2">
                  <label class="flex items-center">
                    <input type="checkbox" value="reading" class="mr-2"> 阅读
                  </label>
                  <label class="flex items-center">
                    <input type="checkbox" value="sports" class="mr-2"> 运动
                  </label>
                  <label class="flex items-center">
                    <input type="checkbox" value="music" class="mr-2"> 音乐
                  </label>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
                <label class="text-right font-medium">备注</label>
                <div class="md:col-span-2">
                  <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md"></textarea>
                </div>
              </div>
              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="md:col-span-2 offset-md-1">
                  <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md">
                    提交
                  </button>
                </div>
              </div>
            </form>
          </div>
        `;
      } else if (this.selectedTemplate === 'minimal') {
        formHtml = `
          <div class="bg-white p-6 rounded-lg">
            <h3 class="text-xl font-bold mb-4">员工信息</h3>
            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">姓名</label>
                <input type="text" class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none">
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                <select class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none">
                  <option value="">请选择部门</option>
                  <option value="hr">人力资源</option>
                  <option value="it">信息技术</option>
                  <option value="marketing">市场营销</option>
                </select>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">性别</label>
                <div class="flex space-x-4">
                  <label class="flex items-center">
                    <input type="radio" name="gender" value="male" class="mr-2"> 男
                  </label>
                  <label class="flex items-center">
                    <input type="radio" name="gender" value="female" class="mr-2"> 女
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">兴趣爱好</label>
                <div class="space-y-2">
                  <label class="flex items-center">
                    <input type="checkbox" value="reading" class="mr-2"> 阅读
                  </label>
                  <label class="flex items-center">
                    <input type="checkbox" value="sports" class="mr-2"> 运动
                  </label>
                  <label class="flex items-center">
                    <input type="checkbox" value="music" class="mr-2"> 音乐
                  </label>
                </div>
              </div>
              <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">备注</label>
                <textarea rows="3" class="w-full px-3 py-2 border-b-2 border-gray-300 focus:border-blue-500 focus:outline-none"></textarea>
              </div>
              <div class="pt-2">
                <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md">
                  提交
                </button>
              </div>
            </div>
          </div>
        `;
      }

      this.generatedForm = formHtml;
      this.nextStep();
    },
    saveForm() {
      // 保存生成的表单
      // 这里可以实现将表单保存到数据库或文件系统
      alert('表单已保存成功！');
    },
  },
};
</script>

<style scoped>
/* 可以在这里添加自定义样式 */
</style>
